<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>天狗商城 - 商品管理</title>
    <link rel="stylesheet" href="../css/gomall.css" />
  </head>

  <body>
    <div id="app" class="main">
      <h2 class="title"><span>天狗商城 - 商品管理</span></h2>
      <table border="1" cellspacing="0" cellpadding="0" width="100%" class="tab">
        <tr>
          <th>序号</th>
          <th>编号</th>
          <th>名称</th>
          <th>单价</th>
          <th>库存</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
        <!--循环渲染出产品，隔行换色，index为序号从0开始-->
        <tr v-for="(pdt,index) in products" v-bind:class="{bg:index%2==0}">
          <td>{{index+1}}</td>
          <td>{{pdt.id}}</td>
          <td>{{pdt.title}}</td>
          <td>{{pdt.price|currency}}</td>
          <td>
            <!--减少产品数量，表达式-->
            <a v-on:click="pdt.quantity<=0?0:(pdt.quantity-=1)" class="abtn"> - </a>
            <input
              v-model="pdt.quantity"
              class="quantity"
              v-on:keyup="pdt.quantity=(pdt.quantity<0?0:pdt.quantity)"
            />
            <!--增加产品数量，表达式-->
            <a v-on:click="pdt.quantity+=1" class="abtn"> + </a>
          </td>
          <!--合计，过滤器-->
          <td>{{pdt.quantity*pdt.price | currency(1)}}</td>
          <td>
            <a v-on:click="remove(index,pdt)" class="abtn">删除</a>
            <a v-on:click="edit(index,pdt)" class="abtn">编辑</a>
          </td>
        </tr>
        <tr>
          <td colspan="7" align="right" class="total">
            {{total|currency}}
          </td>
        </tr>
      </table>

      <form id="formDetails" name="formDetails">
        <fieldset>
          <legend>商品详细</legend>
          <p>
            <label>编号：</label>
            <input v-model="product.id" :disabled="!isAdd?'disabled':false" required="required" type="number"/>
          </p>
          <p>
            <label>名称：</label>
            <input v-model="product.title"  required="required"/>
          </p>
          <p>
            <label>单价：</label>
            <input v-model="product.price" type="number" required="required"/>
          </p>
          <p>
            <label>库存：</label>
            <input v-model="product.quantity" required="required"/>
          </p>
          <p>
            <label>简介：</label>
            <textarea v-model="product.description" cols="50" rows="3" required="required"></textarea>
          </p>
          <p>
            <button @click="save" class="btn out" type="button">保存</button>
            <button @click="clear" class="btn out" type="button">清空</button>
          </p>
          <p class="poster">
            <!--图片加载失败时使用logo-->
            <img :src="'../img/'+product.id+'.jpg'" onerror="this.src='../img/logo.jpg'"/>
          </p>
        </fieldset>
      </form>
    </div>
    <script src="../js/vue/vue.min.js"></script>
    <script src="../js/jQuery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
      //添加货币格式过滤器
      Vue.filter('currency', function (v, n) {
        if (!v) {
          return ''
        }
        return '￥' + parseFloat(v).toFixed(n || 2);
      })
      //实例
      var app = new Vue({
        el: '#app',
        data: {
          //商品列表
          products: [],
          //单个商品对象
          product: {},
          //是否为添加状态
          isAdd: true,
        },
        created() {  //当实例创建完成时的钩子
          //使用jQuery AJAX加载所有商品信息
          $.ajax({
            url: 'http://localhost:8089/api/getProductItems',
            type: 'GET',
            dataType: 'json',
            data: {},
            success: function (data) {
              //获取后台数据，重新渲染视图
              app.products = data;
            },
          })
        },
        computed: {  //计算属性
          //用于计算合计的计算属性
          total: function () {
            var sum = 0
            for (var i = 0; i < this.products.length; i++) {
              sum += this.products[i].price * this.products[i].quantity;
            }
            return sum;
          },
        },
        methods: {
          //移除商品事件
          remove(i, product) {
            if (confirm('您确定要移除吗？')) {
              $.ajax({
                url: 'http://localhost:8089/api/RemoveProduct',
                contentType: 'application/json',
                type: 'DELETE',  //方法类型为DELETE
                dataType: 'json',
                data: JSON.stringify(product),
                success: function (data) {
                  if (data) {  //删除成功
                    //将数据中的产品列表中对应项删除，触发重新渲染界面
                    app.products.splice(i, 1);
                  } else {
                    alert('移除失败!');
                  }
                },
              })
            }
          },
          //编辑事件
          edit(index, pdt) {
            this.isAdd = false;
            //绑定当前绑定的商品对象
            this.product = pdt;
          },
          //保存事件
          save() {
            //如果是添加
            if (this.isAdd) {
              $.ajax({
                url: 'http://localhost:8089/api/AddProduct',
                contentType: 'application/json',
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify(app.product),
                success: function (data) {
                  if (data) {
                    //添加成功时在前台集合中添加新商品，重新渲染视图
                    app.products.push(app.product);
                    alert('添加成功!');
                    //清空当前项
                    app.product={};
                  } else {
                    alert('添加失败!');
                  }
                },
              })
            } else {
              //更新
              $.ajax({
                url: 'http://localhost:8089/api/UpdateProduct',
                contentType: 'application/json',
                type: 'PUT',  //请求方法是PUT
                dataType: 'json',
                data: JSON.stringify(app.product),
                success: function (data) {
                  if (data) {
                    alert('更新成功!');
                    app.clear();
                  } else {
                    alert('更新失败!');
                  }
                },
              })
            }
          },
          //清空
          clear(){
            //将当前操作的产品对象置空
            this.product={};
            //设置为添加状态
            this.isAdd = true;
          }
        }
      })
    </script>
  </body>
</html>
